
(function () {
  var APP = document.getElementById('app')
  // 先移除app下的所有子节点
  while (APP.firstChild) {
    APP.removeChild(APP.firstChild)
  }
  // 创建一个frag容器 先添加子节点 最后在添加到app上
  var frag = document.createDocumentFragment()
  // console.log($.ajax)
  $.ajax({
    url: 'js/data.json',
    type: 'get',
    success: function (res) {
      console.log('res====', res)
      const { data } = res
      if (data && data.length > 0) {
        data.forEach(item => {
          var itemContainer = createItemContainer(item)
          frag.appendChild(itemContainer)
        })
        APP.appendChild(frag)
      }
    }
  })
  // 创建每个item的方法
  function createItemContainer(item) {
    /**
     *  itemContainer的模板容器
     * 
     <div class="item-container">
       <div class="left-container">
         <div class="icon-container">
           <img src="https://img2.baidu.com/it/u=2822383368,4033329397&fm=253&fmt=auto&app=120&f=JPEG?w=300&h=300" alt="">
         </div>
         <div class="desc-container">
           <div class="title">饿了么</div>
           <div class="desc">
             天天享受优惠美食折扣券哟 天天美食大绯闻绯天天享受优惠美食折扣券哟 天天美食大绯闻绯
           </div>
         </div>
       </div>
       <div class="right-container">
         下载
       </div>
     </div>
     
     */
    // 创建一个item容器
    var itemContaienr = createDiv({
      nodeName: 'div',
      attrName: 'class',
      attrVal: 'item-container',
    })
    // 创建一个左侧内容区域
    var leftContainer = createDiv({
      nodeName: 'div',
      attrName: 'class',
      attrVal: 'left-container',
    })
    // 创建icon容器
    var iconContainer = createDiv({
      nodeName: 'div',
      attrName: 'class',
      attrVal: 'icon-container',
    })
    // 创建一个img
    var imgContainer = createDiv({
      nodeName: 'img',
      attrName: 'src',
      attrVal: item.iconUrl,
    })
    // 将img添加到icon中
    iconContainer.appendChild(imgContainer)

    // 创建中间的描述区域
    var descContainer = createDiv({
      nodeName: 'div',
      attrName: 'class',
      attrVal: 'desc-container',
    })
    // title容器
    var titleContainer = createDiv({
      nodeName: 'div',
      attrName: 'class',
      attrVal: 'title',
      nodeText: item.title
    })
    // deacription容器
    var descBox = createDiv({
      nodeName: 'div',
      attrName: 'class',
      attrVal: 'desc',
      nodeText: item.description
    })
    // 先把title添加到descContainer
    descContainer.appendChild(titleContainer)
    // 再把desc添加到descContainer
    descContainer.appendChild(descBox)

    // 先把iconContainer添加到leftContainer
    leftContainer.appendChild(iconContainer)
    // 再把descContainer添加到leftContainer
    leftContainer.appendChild(descContainer)

    // 把左侧区域放入item
    itemContaienr.appendChild(leftContainer)
    // 创建一个右侧下载区域的容器
    var rightContainer = createDiv({
      nodeName: 'div',
      attrName: 'class',
      attrVal: 'right-container',
      nodeText: '下载'
    })
    // 添加点击下载的事件
    rightContainer.addEventListener('click', function () {
      location.href = item.downloadUrl
    })
    // 把右侧区域放入item
    itemContaienr.appendChild(rightContainer)
    return itemContaienr
  }
  // 这个是创建具体节点方法
  /**
   * 
   * @param {nodeName} 节点类型
   * @param {attrName} 属性名称
   * @param {attrVal} 属性值
   * @param {nodeText} 文本内容
   * @returns 
   */
  function createDiv({ nodeName, attrName, attrVal, nodeText }) {
    var node = document.createElement(nodeName)
    node.setAttribute(attrName, attrVal)
    if (nodeText) {
      node.textContent = nodeText
    }
    return node
  }
})()